/**
 *
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...
$(function () {
    // 实现功能1 可以往标签中写东西,点击回车的时候写入在ol中
    // 克隆一个ol标签,获取标签上写入的东西写入ol中,再将ol插入h1里边
    // 获取第一个标签
    var $title = $('#title')
    $title.on('keydown', (evt) => {
        e = evt || event
        if (e.keyCode === 13) {
            cloneHtml()
            $title.val("")
        }

    })
    function cloneHtml() {
        var val = $title.val()
        // 创建节点
        var $li = $(`
        <li>
            <input type="checkbox" />
            <p onclick="edit(1)">${val}</p>
            <a href="javascript:;"">-</a>
        </li>
        `
        )
        $('.demo-box').append($li)

    }

    // 实现选项选中功能和修改标签中内容的功能和a标签的删除功能
    $("section").on("change", "input[type=checkbox]", function () {
        if (this.checked === true) {
            $('#donelist').append($(this).parent())
            count()
        } else {
            $('#todolist').append($(this).parent())
            count()
        }
        
    })

    // 实现点击a标签删除此条数据
    $("section").on('click', 'a', function () {
        $(this).parent().remove()
        count()
    })

    // 改变p标签中的内容
    $('#todolist').on('click', 'p', function () {
        $(this).html("<input type='text' value='" + $(this).text() + "'>")
        var $inp = $(this).children()
        $inp.click(function (evt) {
            e = evt || event
            e.stopPropagation();
        })
        $inp.select();
        $inp.blur(function (evt) {
            this.outerHTML = this.value;
        })
    })

    $(document).on("mouseover", function () {
        $.ajax({
            url: "/ip",
            type: "GET",
            data: {
                ip: '',
                country: '',
                area: ''
            },
            dataType: "json",
            success: function (res) {
                fn(res)
            }
        })
    })

    function fn(res) {
        $("#ipv4").html(`${res.ip}`)
        $("#addr").html(`${res.country} ${res.area}互联网数据交换中心`)
    }

    function count(){
        var num = $('#todolist li').length
        $('#todocount').text(`${num}`)
        
        var num1 = $('#donelist li').length
        $('#donecount').text(`${num1}`)
    }

})